<template>
  <div class="suppor">
    <!-- 导航 -->
    <nav-bar></nav-bar>
    <!-- 身体 -->
    <div class="border">
      <div class="top">
        <div class="top-content">
          <div class="top-continer">
            <div class="large">
              <div>
                <div class="f1">
                  <h1 class="title color-black h1 uppercase">NVIDIA 支持</h1>
                </div>
                <div class="f2">
                  <p>
                    NVIDIA
                    的支持服务旨在满足消费者和企业客户的需求，提供多种选择来帮助确保出色的客户体验。&nbsp;
                  </p>
                  <p>请选择下面的相应选项以了解详情。</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-content">
          <div class="bottom-continer">
            <div class="large">
              <!-- card1 -->
              <div class="card">
                <template v-if="card">
                  <el-card
                    class="box-card"
                    shadow="hover"
                    v-for="{
                      cid,
                      big_title,
                      small_title,
                      li_blik1,
                      li_blik2,
                      li_blik3,
                      li_blik4,
                      a_blik1,
                      a_blik2,
                    } in card"
                    :key="cid"
                  >
                    <div class="text-item">
                      <div class="continer">
                        <div class="top">
                          <h2 class="title color-black h3 none">
                            {{ big_title }}
                          </h2>
                        </div>
                        <div class="center">
                          <p>{{ small_title }}</p>
                          <ul>
                            <li>{{ li_blik1 }}</li>
                            <li>{{ li_blik2 }}</li>
                            <li>{{ li_blik3 }}</li>
                            <li v-if="li_blik4">{{ li_blik4 }}</li>
                          </ul>
                        </div>
                        <div class="bottom">
                          <div class="text">
                            <a href="/">
                              <span>{{ a_blik1 }}</span>
                              <span class="el-icon-arrow-right"></span>
                            </a>
                            <a href="/">
                              <span>{{ a_blik2 }}</span>
                              <span
                                v-if="a_blik2 !== ''"
                                class="el-icon-arrow-right"
                              ></span>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <footer-one></footer-one>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import FooterOne from "@/components/FooterOne.vue";
export default {
  components: { NavBar, FooterOne },
  data() {
    return {
      card: null,
    };
  },
  mounted() {
    this.getcard();
  },
  methods: {
    getcard() {
      this.axios.get("/card").then((res) => {
        console.log(res);
        this.card = res.data;
      });
    },
  },
};
</script>

<style scoped src="../assets/css/suppor.css">
</style>
<style lang="scss" scoped>
</style>